<template>
	<view>
		<view class="mar-search">
			<view class="search-cont">
				<image src="../../static/tab/sousuo.svg" mode="widthFix" class="search-img"></image>
				<input type="text" value="" placeholder="请输入要搜索的城市" @focus="searchInput" @input="searchInputs" v-model="clearinput"/>
			</view>
			<view class="search-code">
				<image src="../../static/tab/chaa.svg" mode="" v-if="!cityAll" @click="chacha"></image>
			</view>
		</view>

		<!-- 推荐城市 -->
		<view class="city-all" v-if="cityAll">
			<view class="city-view">
				<view class="city-text">当前定位城市</view>
				<view class="city-img">
					<image src="../../static/tab/gonglveb.png" mode="widthFix"></image>
					<text class="txt" @click="mycity">{{addressd}}</text>
				</view>
			</view>
			<!-- 定位城市 -->
			<view class="DW-city">
				<view class="hot-city">热门城市</view>
				<view class="menu-block">
					<block v-for="(item,index) in searchList" :key="index">
						<view @click="hotcity(item.cityname)">
							{{item.cityname}}
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 搜索城市结果 -->
		<view v-if="!cityAll">
			<view class="search-text">
				<block v-for="(item,index) in searchCity":key="index">
					<view class="search-text-city" @click="searchCitys(item.title)">
						<image src="../../static/tab/gonglveb.png" mode="widthFix"></image>
						<text>{{item.title}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	//定位
	import declared from '../../element/dingweiList.js'
	//腾讯地图接口插件和Key值
	var QQMapWX = require('../../element/qqmap-wx-jssdk.js');
	var qqmapsdk;
	qqmapsdk = new QQMapWX({
	    key: 'T22BZ-H55WD-DUU4K-P3AUS-DWSTV-EKFDD'
	        });
	
	export default {
		data() {
			return {
				//清空输入框值
				clearinput:'',
				//定位城市
				addressd:'',
				//搜索列表值
				searchCity:[],
				cityAll:true,
				//判断路由是从哪个页面进来的
				pagesroute:'',
				searchList: [{
						"cityname": "西安市"
					},
					{
						"cityname": "榆林市"
					},
					{
						"cityname": "乌鲁木齐"
					},
					{
						"cityname": "深圳市"
					},
					{
						"cityname": "哈尔滨"
					}
				],
			}
		},
		methods: {
			searchInput(){
				this.cityAll = false
			},
			chacha(){
				this.cityAll = true
				this.clearinput = ''
				this.searchCity = ''
				
			},
			//定位
			addrace(){
				declared().then(res=>{
					// console.log(res)
					this.addressd = res.result.ad_info.city
				}).catch(err=>{
					console.log(err)
					this.addressd = '北京市'
				})
				
			},
			//腾讯地图实时搜索功能 getSuggestion()文档接口
			searchInputs(e){
				// console.log(e.detail.value)
				qqmapsdk.getSuggestion({
					keyword:e.detail.value,
					filter:'category=景点',
					success:(res)=>{
						console.log(res.data)
						console.log(res.data[0].city)
						this.searchCity = res.data;
					},
					fail:(err)=>{
						console.log(err)
					}
				})	
			},
			
			//我的城市定位加点击跳转
			mycity(){
				//路由跳转有的携带不了参数，用vuex传值
				
				let cityview = this.addressd
				if(this.pagesroute == 'pages/travels/travels'){
					// console.log(city)
					this.$store.commit('travemuta',cityview)
				}else{
					// console.log(city)
					this.$store.commit('citymuta',cityview)
				}
				// console.log(this.addressd)
				uni.navigateBack({
					delta:1
				})
			},
			//热门城市定位加点击跳转
			hotcity(city){
				//路由跳转有的携带不了参数，用vuex传值
				// console.log(city)
				if(this.pagesroute == 'pages/travels/travels'){
					console.log(city)
					this.$store.commit('travemuta',city)
				}else{
					console.log(city)
					this.$store.commit('citymuta',city)
				}
				uni.navigateBack({
					delta:1
				})
			},
			//搜索城市点击添加跳转
			searchCitys(city){
				if(this.pagesroute == 'pages/travels/travels'){
					// console.log(city)
					this.$store.commit('travemuta',city)
				}else{
					// console.log(city)
					this.$store.commit('citymuta',city)
				}
				uni.navigateBack({
					delta:1
				})
			}
		},
		created() {
			this.addrace()
		},
		//路由判断
		onLoad() {
			let pages = getCurrentPages()
			let prevpages = pages[pages.length-2];
			console.log(prevpages.route)
			this.pagesroute = prevpages.route
		}
	}
</script>

<style lang="scss">
	.mar-search {
		background-color: #Ffd300;
		padding: 30upx 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search-cont {
			padding: 0 13upx;
			background-color: #ffffff;
			justify-content: start;
			align-items: center;
			display: flex;
			width: 100%;
			height: 60upx;
			border-radius: 40upx;
			input{
				width: 100%;
			}
			.search-img {
				width: 50upx;
				height: 50upx;
			}

			input {}
		}

		.search-code {
			margin-left: 20upx;
			padding-top: 5upx;

			image {
				margin-top: 20upx;
				width: 50upx;
				height: 50upx;
			}
		}
	}
	.city-all{
		// display: none;
	}

	.city-view {
		margin: 25upx 50upx 20upx 20upx;
		display: flex;
		background-color: #f9f9f9;
		width: 95%;
		height: 80upx;
		justify-content: start;
		align-items: center;
		padding: 0 20upx;
		box-sizing: border-box;
		border-radius: 15upx;

		.city-text {}

		.city-img {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 60upx;
				height: 60upx;
				padding: 0 35upx;
			}
		}
	}

	.DW-city {
		.hot-city {
			color: #ababab;
			margin: 20upx 0 15upx 25upx;
		}

		.menu-block {
			display: flex;
			flex-wrap: wrap;

			view {
				background-color: #ffffff;
				border: 1px solid #dadada;
				padding: 15upx 20upx;
				margin: 10upx 25upx 25upx 25upx;
				border-radius: 10upx;
			}
		}
	}
	.search-text{
		width: 100%;
		height: 100%;
		.search-text-city{
			margin: 20upx 0 10upx 10upx;
			justify-content: start;
			align-items: center;
			display: flex;
			image{
				width: 60upx;
				height: 60upx;
				padding: 0 30upx;
			}
			text{
				color: #ffba0b;
			}
		}
	}
	</style>
